<script setup lang="ts">
import type { Page } from '@/types'
import { onMounted, ref } from 'vue'
import { Search, Refresh } from '@/util/icons'
import Pagination from '@/components/Pagination.vue'
import type { HandleTable } from '@/types/handle'
import { getHandleName } from '@/api/handle'
import { getFormatDictMap } from '@/util/dict'
import { deepCopy } from '@/util/token'

const page = ref<Page<HandleTable>>({
  num: 1,
  size: 21,
  rows: [],
  count: 0
})

// 页面加载
const loading = ref<boolean>(false)
// 获取页面数据
function getPageData() {
  loading.value = true
  getHandleName(page.value, searchForm.value)
    .then((tabs) => {
      page.value = tabs.data
    })
    .finally(() => {
      setTimeout(() => {
        loading.value = false
      }, 500)
    })
}

/* 搜索 */
/* 是否展示搜索栏 */
const searchForm = ref<HandleTable>({
  name: '',
  path: '',
  type: ''
})

// 重置搜索框
function reSearch() {
  searchForm.value = {
    name: '',
    path: '',
    type: props.type
  }
  getPageData()
}

const props = defineProps<{
  ids: number[]
  type: 'handle' | 'sign'
}>()
// 已选数据
const checkData = ref<number[]>([])
const emit = defineEmits(['selectHandle'])
// 查询控制
function select() {
  emit('selectHandle', checkData.value)
}

/* 获取对应的字典信息 */
const tableDict = ref<Map<string, string>>()
onMounted(() => {
  getFormatDictMap('handle_manage', 'head').then((d) => {
    tableDict.value = d
  })
  checkData.value = deepCopy(props.ids)
  searchForm.value.type = props.type
  getPageData()
})

// 清空筛选
function clear() {
  checkData.value = []
}
</script>

<template>
  <div class="dialog-page">
    <div class="control">
      <div class="search">
        <el-form :inline="true">
          <el-form-item :label="tableDict?.get('name') || 'name'">
            <el-input
              v-model="searchForm.name"
              :placeholder="'请输入' + tableDict?.get('name') || 'name'"
            ></el-input>
          </el-form-item>
          <el-form-item :label="tableDict?.get('path') || 'path'">
            <el-input
              v-model="searchForm.path"
              :placeholder="'请输入' + tableDict?.get('path') || 'path'"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :icon="Search" @click="getPageData">搜索</el-button>
            <el-button :icon="Refresh" @click="reSearch">重置</el-button>
            <el-button @click="clear">清空筛选</el-button>
            <el-button :icon="Refresh" @click="getPageData" circle></el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="ctx" v-loading="loading">
      <el-row>
        <el-col v-for="item in page.rows" :span="8">
          <el-checkbox-group v-model="checkData">
            <el-checkbox name="check" :label="item.hId">{{ item.name }}</el-checkbox>
          </el-checkbox-group>
        </el-col>
      </el-row>
      <Pagination :page="page" :get-page-data="getPageData" />
    </div>
    <div class="buttons">
      <el-button type="primary" @click="select">查询</el-button>
    </div>
  </div>
</template>
<style scoped lang="less">
@import '../../../assets/page_bgl.less';

.dialog-page {
  padding: 0 20px;
}
</style>
